import React, { ReactNode } from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
import { Icon } from "@rneui/themed";
import { useTheme } from "@/contexts/ThemeContext";
import { lightTheme } from "@/styles/light.style";

type ThemeColors = typeof lightTheme;

interface SettingItemProps {
  label: string;
  description?: string;
  onPress?: () => void;
  rightComponent?: ReactNode;
  showArrow?: boolean;
}

const SettingItem: React.FC<SettingItemProps> = ({
  label,
  description,
  onPress,
  rightComponent,
  showArrow = true,
}) => {
  const { colors } = useTheme();
  const styles = getStyles(colors);

  const content = (
    <View style={styles.container}>
      <View style={styles.leftContent}>
        <Text style={styles.label}>{label}</Text>
        {description && <Text style={styles.description}>{description}</Text>}
      </View>
      <View style={styles.rightContent}>
        {rightComponent}
        {showArrow && onPress && (
          <Icon
            name="chevron-right"
            type="material-community"
            size={20}
            color={colors.text.secondary}
            style={styles.arrow}
          />
        )}
      </View>
    </View>
  );

  if (onPress) {
    return (
      <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
        {content}
      </TouchableOpacity>
    );
  }

  return content;
};

const getStyles = (colors: ThemeColors) =>
  StyleSheet.create({
    container: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      paddingVertical: 16,
      paddingHorizontal: 20,
      backgroundColor: colors.card.background,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: colors.border.light,
    },
    leftContent: {
      flex: 1,
    },
    rightContent: {
      flexDirection: "row",
      alignItems: "center",
    },
    label: {
      fontSize: 16,
      color: colors.text.primary,
    },
    description: {
      fontSize: 12,
      color: colors.text.secondary,
      marginTop: 4,
    },
    arrow: {
      marginLeft: 8,
    },
  });

export default SettingItem;
